import React from "react";

export interface PropToForm {
    tag: string;  // 渲染组件的名称
    type: string;  // 属性类型
    key?: string;  // 当前属性的key，针对需要由多个属性拼接为一个属性的情况下使用
    extraProps?: { [key: string]: any };
    label?: string;
    propType?: "style" | "component";  // 编辑属性类型，当外层的PropsType为custom时需要
    propCombine?: boolean;   // 多个属性合并处理的情况下使用，此时会搜集属性中对应options下的所有属性组合传递给组件，例如字体样式属性：加粗 + 斜体 + 下划线
    options?: {   // 针对Select选择组件的options配置
        text: string | React.ReactNode;
        value: any;
    }[];
    subComponent?: (option: any) => React.ReactNode;  // 针对渲染Select组件的options选项
    initialTransform?: (v: any) => any;  // 初始化时对数据value进行转换
    afterTransform?: (v: any) => any;    // 针对组件事件输出内容的转换
}

export interface CombineFormItem {
    type: string; // 属性类型
    form: PropToForm[],
    propType?: "style" | "component"; 
    combineFunc?: (current: string, value: any, key: string) => any;
}

export interface CommonComponentProps {
    // actions
    actionType: string;
    url: string;
    // size
    height: string;
    width: string;
    paddingLeft: string;
    paddingRight: string;
    paddingTop: string;
    paddingBottom: string;
    // border type
    borderStyle: string;
    borderColor: string;
    borderWidth: string;
    borderRadius: string;
    // shadow and opacity
    boxShadow: string;
    opacity: string;
    // position and x, y
    left: string;
    top: string;
    display: string;
}

export interface CommonEditForm {
    // size
    height: PropToForm | CombineFormItem;
    width: PropToForm | CombineFormItem;
    paddingLeft: PropToForm | CombineFormItem;
    paddingRight: PropToForm | CombineFormItem;
    paddingTop: PropToForm | CombineFormItem;
    paddingBottom: PropToForm | CombineFormItem;
    // border type
    borderStyle: PropToForm | CombineFormItem;
    borderColor: PropToForm | CombineFormItem;
    borderWidth: PropToForm | CombineFormItem;
    borderRadius: PropToForm | CombineFormItem;
    // shadow and opacity
    boxShadow: PropToForm | CombineFormItem;
    opacity: PropToForm | CombineFormItem;
    // position and x, y
    left: PropToForm | CombineFormItem;
    top: PropToForm | CombineFormItem;
}

export interface PageStyleProps {
    backgroundColor: string,
    backgroundRepeat: string,
    backgroundSize: string,
    height: string
}